  $sizes: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40;


  // margin and padding
  @each $size in $sizes {

    .mlr-#{$size} {
      margin-left: #{$size}rpx;
      margin-right: #{$size}rpx;
    }

    .mtb-#{$size} {
      margin-top: #{$size}rpx;
      margin-bottom: #{$size}rpx;
    }

    .plr-#{$size} {
      padding-left: #{$size}rpx;
      padding-right: #{$size}rpx;
    }

    .ptb-#{$size} {
      padding-top: #{$size}rpx;
      padding-bottom: #{$size}rpx;
    }

    .mt-#{$size} {
      margin-top: #{$size}rpx;
    }

    .mr-#{$size} {
      margin-right: #{$size}rpx;
    }

    .mb-#{$size} {
      margin-bottom: #{$size}rpx;
    }

    .ml-#{$size} {
      margin-left: #{$size}rpx;
    }

    .pt-#{$size} {
      padding-top: #{$size}rpx;
    }

    .pr-#{$size} {
      padding-right: #{$size}rpx;
    }

    .pb-#{$size} {
      padding-bottom: #{$size}rpx;
    }

    .pl-#{$size} {
      padding-left: #{$size}rpx;
    }

    .p-#{$size} {
      padding: #{$size}rpx;
    }
  }